<!--
 * @Author: your name
 * @Date: 2021-08-12 16:13:30
 * @LastEditTime: 2021-08-13 09:56:29
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /day04-网易严选/html/index.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>网易严选</title>
  <style>@font-face {
    font-family: "iconfont"; /* Project id 1337926 */
    src: url('iconfont.woff2?t=1628758073922') format('woff2'),
         url('iconfont.woff?t=1628758073922') format('woff'),
         url('iconfont.ttf?t=1628758073922') format('truetype');
  }
  
  .iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  .icon-0:before {
    content: "\e627";
  }
  
  .icon-search:before {
    content: "\e680";
  }
  
  .icon-gouwuche1:before {
    content: "\e643";
  }
  
  .icon-arrowRight-copy:before {
    content: "\e677";
  }
  
  .icon-tongzhi:before {
    content: "\e6ed";
  }
  
  .icon-kefu:before {
    content: "\e64e";
  }
  
  .icon-shouji:before {
    content: "\e605";
  }
  
  .icon-lianxi2hebing-17:before {
    content: "\e628";
  }
  
  .icon-weibo:before {
    content: "\e66b";
  }
  
  .icon-xiazai16:before {
    content: "\e610";
  }
  
  .icon-shouji54:before {
    content: "\e660";
  }
  
  .icon-weixin:before {
    content: "\e6b3";
  }
  
  .icon-yonghu:before {
    content: "\e6b4";
  }
  
  .icon-gouwuche:before {
    content: "\e602";
  }
  
  .icon-sousuo:before {
    content: "\e694";
  }

  html,body{
    width: 100%;
    font: normal 12px 'Microsoft YaHei';
    margin:0px;
  }
  ul {
    margin: 0;
    padding: 0;
  }
  li{
    list-style: none;
  }
  .wapper{
    width: 1200px;
    margin: 0 auto;
  }
  /* 通知 */
  .top{
    background-color: #333333;
  }
  
  .top .left {
    float: left;
    color: #cc9756;
    line-height: 3em;
  }
  .top .left a{
    color: #cc9756;
    margin-left: 10px;
  }
  .top .left a:hover{
    color: #fff;
    text-decoration: none;
  }
  .top .right {
    margin-left: 550px;
  }
  .top .right::after{
    content: '';
    display: block;
    clear: both;
  }
  .top .right>div {
    box-sizing: border-box;
    float: left;
    padding: 0.8em 0;
  }
  .top .right>div>div{
    text-align: center;
    width: 90px;
  }
  .top .right>div:last-child a{
    border:none
  }
  .top .right>div> div a{
    color: #ababab;
    text-decoration: none;
    border-right: 1px solid #dfdfdf;
    padding-right: 15px;
  }
  .top .right>div> div a:hover{
    color: #fff;
  }
  .top .right>div> div a:hover>div.sub_menu_container{
    display: block;
  }
  .top .right>div> div a>div.sub_menu_container{
    box-sizing: border-box;
      display: none;
      position: absolute;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
      width: 100%;
      color: #cc9576;
      margin-left:435px;
     
      padding: 0 .5em;
      left: 0;

  }
  .top .right>div> div a>div.sub_menu_container .icon_sj {
      position: absolute;
      background-color: #fff;
      width: 10px;
      height: 10px;
      left: 50%;
      margin-left:420px;
      top: -5px;
      transform: rotate(45deg);
    }
   
  /* 通知结束 */
  /* 搜索、菜单 */
  .bottom {
    background-color: #ffffff;
  }
  .bottom .search{
    
    height: 100px;
  }
  .bottom .menu{
   
    height: 100px;
  }
  /* 人气推荐 */
  .rqtj{
    background-color: #f4f0eb;
    
  }
  .popularity{
    padding: 60px 0px;
    margin: 0 auto;
  }
  .popularity>.title{
    padding-bottom: 20px;
  }
  .title>.name {
    margin: 0px 20px 0px 0px;
    /* padding-top: 0px; */
    font-size: 28px;
    display: inline-block;
  }
  .title>.name:hover {
    color: #b1a07d;
    cursor: pointer;
  }
  .headerLeft {
    display: inline-block;
    margin: 10px 20px 10px 10px;
    padding-left: 10px;
    padding-right: 10px;
  }
  .headerLeft:hover {
    cursor: pointer;
    color: #b1a07d;
  }
  .checked {
    color: #b1a07d;
    border-bottom: 2px solid #b1a07d;
  }
  .headerRight {
    margin-top: 20px;
    margin-right: 60px;
    float: right;
    display: inline;
  }
  .headerRight:hover {
    cursor: pointer;
    color: #b1a07d;
  }
  .headerRight,
  .headerLeft {
    font-size: 14px;
  }
  /* 人气推荐产品布局 */
  .product {
    /* margin-left: 30px; */
  }
  .product::after {
    content: '';
    display: block;
    clear: both;
  }
  #productItemFirst {
    margin-left: 0px;
    width: 410px;
    height: 600px;
  }
  #productItemFirst>:nth-child(2) {
    width: 320px;
    margin: 40px 35px;
  }
  #productItemFirst>:first-child {
    width: 48px;
    height: 48px;
    position: absolute;
  }
  #productItemFirst>:nth-child(2):hover {
    margin: 35px 30px;
    width: 336px;
    height: 336px;
    cursor: pointer;
  }
  .productItem {
    margin-left: 20px;
    background-color: white;
    width: 240px;
    height: 290px;
    float: left;
  }
  .productItem>:nth-child(2) {
    width: 180px;
    margin: 0 21.5px;
  }
  .productItem>:first-child {
    width: 48px;
    height: 48px;
    position: absolute;
  }
  .productItem>:nth-child(2):hover {
    margin: 0 18px;
    width: 189px;
    height: 189px;
    cursor: pointer;
  }
  
  .product>:nth-child(5),
  .product>:nth-child(6),
  .product>:nth-child(7) {
    margin-top: 20px;
  }
  #productItemFirst>.title {
    width: 100%;
    text-align: center;
    border-top: 1px solid #f4f0eb;
  }
  #productItemFirst>.title>.name {
    margin: 40px 71px 13px 71px;
    padding-top: 0px;
    font-size: 18px;
    display: inline-block;
  }
  #productItemFirst>.title>.name:hover {
    color: #b1a07d;
    cursor: pointer;
  }
  #productItemFirst>.title>.price {
    color: #D4282D;
    font-size: 18px;
  }
  /* 其它商品卡片的title样式 */
  .productItem>.title {
    width: 100%;
    text-align: center;
    border-top: 1px solid #f4f0eb;
  }
  .productItem>.title>.name {
    margin: 0 43.5px 4px;
    padding-top: 0px;
    font-size: 13px;
    display: inline-block;
  }
  .productItem>.title>.name:hover {
    color: #b1a07d;
    cursor: pointer;
  }
  .productItem>.title>.price {
    color: #D4282D;
    font-size: 13px;
    margin: 0;
  }
  .productItem>.title>.price>span {
    color: #999999;
    text-decoration: line-through;
  }
  .productItem>.title>.prdtTags {
    margin: 4px 11.5px 4px;
    font-size: 12px;
  }
  .productItem>.title>.prdtTags>span {
    color: white;
    background-color: #E36844;
  }
  /* 人气推荐结束 */
   
  .search .log{
    width:100x;
      height:40px;
      float:left;
      margin:auto;
  }
  .search .log img{
    width:200px;
      height:60px;
      margin:auto;
  }
  .search .sousuo{
      width:600px;
      height:100px;
      float:left;
      margin:auto;
      
      position: relative;
  }
    .sousuo >div{
          position: absolute;
          top:0px;
          bottom:0px;
          left:50px;
          right:0px;
          margin:auto;
          margin-top:20px;
          text-align: center;
          width:500px;
          height: 70px;
          border:1px solid #fff;
    
  }
       .sousuo .icon-search{
           position: absolute;
           top:10px;
           left:25px;
           font-size: 22px;
       }
       .search .shopcar{
           padding-top: 1px;
           
           width:200px;
           height: 100px;
           margin: auto;
           margin-top:30px;
           margin-left: 900px;
           margin-right: 500px;
           position: relative;
           font-size: 16px;

       }
       .shopcar .car{
           width:130px;
           height: 40px;
           top:10px;
          bottom:20px;
          left:0px;
          right:70px;
          margin:auto;
          margin-top:20px;
          text-align: center;
          border:1px solid #cc9576;
          border-radius: 20px;
          line-height: 40px;


       }
       .shopcar .car:hover{
           background: #f5f3ef;
           cursor: pointer;
       }
       .shopcar .icon-gouwuche1{
           color:#cc9756
       }
       .shopcar .icon-0{
           color:#D4282D;
       }
       .shopcar .car span{
           display:inline-block;
           margin:0px 10px;
           color:#cc9576;
       }
       .sousuo .search_top{
           font-size: 22px;
       }
       .sousuo .search_top input{
           padding-left: 4em;
           width:350px;
           height:35px;
           border:2px solid #cc9756;
           border-top-left-radius: 17px;
           border-bottom-left-radius: 17px;
           border-top-right-radius: 17px;
           border-bottom-right-radius: 17px;
        }
        .sousuo .but_text{

            display:inline-block;
            color:#fff;
            
            background-color: #cc9576;
            height:35px;
            width:80px;
            border-top-left-radius:17px;
            border-top-right-radius:17px;
            border-bottom-left-radius:17px;
            border-bottom-right-radius:17px;

        }
        .sousuo .but_text:hover{
            background-color:#e1c199;
            cursor:pointer;
    }
    .sousuo .search_bottom{
        
        margin: 5px 25px;
        text-align: left;
    }
    .sousuo .search_bottom a{
        color:#b3b3b3;
        text-decoration: none;;
    }
    .sousuo .search_bottom a:hover{
        color:#cc9756;
    }
    .bottom .menu{
       
        height: 100px;
        text-align: center;
        
    }
    .menu  ul{
        font-size: 18px;
        margin:
        
    }
    .menu  ul a{
        
        text-decoration: none;
        color:#333;
        font-weight: bold;
       
    }
    .menu  ul a:hover{
        cursor:pointer;
        color:#cc9756;
        border-bottom:3px solid #cc9576;
    }
    .menu  ul::after{
        content:"";
        display: block;
        clear:both

    }
    .menu  ul li{
       
        float:left;
        width: 100px;
        margin-top: 26px;
        padding-bottom: 0.5em;
       

       

    }
    .menu  ul li:hover{
        padding-bottom: 0.5em;
    }
    .menu  ul li:nth-child(9){
      padding-right:10px;
      border-right: 1px solid #cc9576;
    }
    .header_img{
      margin:0 auto;
      margin-left: 25px;
    }
    

    .list> ul >li div.second{
      display: none;
      position: absolute;
      top:20;
      left:0;
      width:1100px;
      height: 200px;
      background-color:#fff;
      text-align: center;
     margin-left: 50px;
      margin-top: 10px;

    }
    
    .list> ul >li:hover div.second .project{
      display:block;
      border: 1 solid #bb3343;
      margin-left: 40px;
      float: left;
    }
    .list> ul >li:hover div.second .project .pro1{
      font-size: 18px;
      margin-top: 10px;
      color:#cc9756;

      
    }
    .list> ul >li:hover div.second .project .pro{
      font-size: 14px;
      margin-top: 10px;
    

    }
    .list> ul >li:hover div.second .project .pro:hover{
      cursor: pointer;
      color:#cc9756;
    }
    .list> ul >li:hover div.second .project .pro:nth-child(1){
      margin-top: 10px;
    }
    .list> ul >li:hover div.second{
      display: block;
      z-index: 1000;
    }
    
    
    .lunbo{
      text-align: center;
    }
    .lunbo img{
      width:100%;
    }

    /* 热销榜 */
.hot_outer {
  position: sticky;
  top: 55px;
  left: 15px;
  width: 1200px;
  /* margin: auto; */
  z-index: 20;
  float:left;
}
.hot_goods {
  height: 365px;
  position: sticky;
  float: left;
  border: 1px solid #E2DED6;
  box-sizing: border-box;
  background-color: #fff;
}
.hot_goods li {
  padding: 1px 11px 0;
  border-bottom: 1px solid #e2ded6;
  font-size: 12px;
  width: 108px;
  height: 36px;
  text-align: left;
  position: relative;
  display: table;
  cursor: pointer;
  box-sizing: border-box;
}
.hot_goods li:first-child {
  color: #bb3343;
  font-size: 14px;
  font-weight: 600;
  background-image: url(../img/热销榜.webp);
  /* width: 111px; */
  /* margin-left: -13px; */
  text-align: center;
  line-height: 36px;
}
.hot_goods li img {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 2;
  left: 12px;
}
.hot_goods li span {
  display: table-cell;
  padding-left: 36px;
  line-height: 14px;
  vertical-align: middle;
}

/*新品首发*/
.wrapper {
      width: 1090px;
      margin: 0 auto;
    }
    .xpsf {
    }
    .xpsf ul.p_list::after {
      content: "";
      display: block;
      clear: both;
    }
    .xpsf ul.p_list > li {
      height: 361px;
      float: left;
      width: 265px;
      margin-right: 10px;
      cursor: pointer;
    }
    .xpsf ul.p_list > li:last-child {
      margin-right: 0;
    }
    .xpsf ul.p_list > li:hover {
      background-color: #f4f4f4;
    }
    .xpsf ul.p_list > li:hover .photo_list{
      margin-left: -265px;
    }
    .xpsf ul.p_list > li > .photo {
      height: 265px;
     
      overflow: hidden;
    }
    .xpsf ul.p_list > li > .photo > .photo_list {
      width: 265px;
      height: 265px;
      display: flex;
    }
    .xpsf ul.p_list > li > .photo > .photo_list img {
      display: block;
      width: 265px;
    }
    .xpsf ul.p_list > li >.text {
      margin: 20px;
      text-align: center;
    }
    .xpsf ul.p_list > li >.text >span{
      padding-top: 20px;
      margin: 40px;
      text-align: center;
      color:#000;
      font-size: 14px;
     
    }
    .xpsf ul.p_list > li >.text >.price{
      color:#D4282D;
      margin-top: 10px;
    }

    
    }
    .jjsh {
      height: 300px;
      
    }
    .photo>.title>.name{

    color: #D4282D;
    font-size: 13px;
    margin: 0;
    }
    .wrapper>.name {
    margin: 0px 20px 0px 0px;
    /* padding-top: 0px; */
    font-size: 28px;
    display: inline-block;
  }
  .title>.name:hover {
    color: #b1a07d;
    cursor: pointer;
  }
  .headerLeft {
    display: inline-block;
    margin: 10px 20px 10px 10px;
    padding-left: 10px;
    padding-right: 10px;
  }
</style> 
</head>

<body>
<div class="header">
    <!-- top -->
    <div class="top">
      <!-- 固定显示内容 -->
      <div class="wapper">
        <div class="left">
          <i class="iconfont icon-tongzhi"></i>
          <a href="">因事件（疫情、特大暴雨、台风）影响，部分地区无法配送公告</a>
        </div>
        <div class="right">
          <div>
            <div>
              <a href="">登录/注册</a>
            </div>
          </div>
          <div>
            <div>
              <a href="">我的订单</a>
            </div>
          </div>
          <div>
            <div>
              <a href="">会员</a>
            </div>
          </div>
          <div>
            <div>
              <a href="">甄选家</a>
            </div>
          </div>
          <div>
            <div>
              <a href="">企业采购
                <i class="iconfont icon-arrowRight-copy "></i>
              </a>
            </div>

          </div>
          <div>
            <div class="tmenu">
              <a href="">客户服务<i class="iconfont icon-arrowRight-copy"></i>
            
              <div class="sub_menu_container">
                <div class="icon_sj"></div>
                <ul class="sub_menu">
                  <li>在线客服</li>
                  <li>帮助中心</li>
                  <li>上午合作</li>
                  <li>开放平台</li>
                </ul>
              </div>
            </a>
            </div>
            
          </div>
          <div>
            <div>
              <a href="">
                <i class="iconfont icon-shouji"></i>
                APP
              </a>
            </div>

          </div>
        </div>
      </div>
      <!-- 固定显示内容结束 -->
    </div>
    <!-- top结束 -->
    <!-- bottom -->
    <div class="bottom">
      <div class="wapper">
        <!-- search -->
        <div class="search">
            <div class="log">
                <img src="/image/logo.png" alt="图片丢失">

            </div>
            <div class="sousuo">
                <div>
                    <div class="search_top">
                        <i class="iconfonticon-search"></i>
                        <input type="text">
                        <span class="but_text">搜索</span>
                      
                    </div>
                    <div class="search_bottom">
                      <a href="">七夕礼物</a>
                    </div>
                </div>
            </div>
         <div class="shopcar">
            <div class="car">
                <i class="iconfont icon-gouwuche1"></i>
                <span>购物车</span>
                <i class="iconfont icon-0"></i>
            </div>

         </div>
        </div>
        <!-- search结束 -->
        <!-- menu -->
        <div class="menu">
          <div class="list">
            <ul>
                <li ><a href="">首页</a>
                
                </li>

                <li><a href="">居家生活</a>
                  <div class="second">
                    <div class="project"> 
                   <div class="pro1">床品套件</div>
                   <div class="pro">收纳家饰</div>
                   <div class="pro">疫情防控</div>
                   <div class="pro">居家布艺</div>
                   <div class="pro">北欧原木</div>
                  </div>
                <div class="project">
                 <div class="pro1">被枕褥毯</div>
                 <div class="pro">被枕盖毯</div>
                 <div class="pro">床垫床褥</div>
                 
                </div>
                <div class="project">
                  <div class="pro1">办公家居</div>
                  <div class="pro">办公家居</div>
                  <div class="pro">好物精选</div>
                  
                 </div>
                 <div class="project">
                  <div class="pro1">卧室家具</div>
                  <div class="pro">卧室家具</div>
                  <div class="pro">灯具</div>
                  <div class="pro">小件家具</div>
                 </div>
                 <div class="project">
                  <div class="pro1">厨房家具</div>
                  <div class="pro">厨房家具</div>
                  <div class="pro">厨房爆款清单</div>
                  
                 </div>
                 <div class="project">
                  <div class="pro1">锅具清洁</div>
                  <div class="pro">品质锅具</div>
                  <div class="pro">餐厨配件</div>
                  <div class="pro">桌具</div>
                 </div>
                 <div class="project">
                  <div class="pro1">客厅家具</div>
                  <div class="pro">客厅家具</div>
                  <div class="pro">家饰</div>
                  <div class="pro">收纳</div>
                 </div>
                 <div class="project">
                  <div class="pro1">收纳家饰</div>
                  <div class="pro">疫情防控</div>
                  <div class="pro">居家布艺</div>
                  <div class="pro">北欧原木</div>
                 </div>
                 <div class="project">
                  <div class="pro1">宠物生活</div>
                  <div class="pro">宠物生活</div>
                  <div class="pro">宠物食品</div>
                  
                 </div>
              </div> 
                 
                </li>
                <li><a href="">服饰鞋包</a>
                  <div class="second">二级菜单

                  </div>
                </li>
                <li><a href="">美食酒水</a>
                  <div class="second">二级菜单</div>
                </li>
                <li><a href="">个护清洁</a>
                  <div class="second"></div>
                </li>
                <li><a href="">母婴亲子</a>
                  <div class="second"></div>
                </li>
                <li><a href="">运动旅行</a>
                  <div class="second"></div>
                </li>
                <li><a href="">数码家电</a>
                  <div class="second"></div></li>
                
                </li>
                <li><a href="">严选全球</a>
                  <div class="second"></div></li>
                
                </li>
                <li><a href="">为你严选</a>
                  <div class="second"></div></li>
                
                </li>
                <li><a href="">众筹</a>
                  <div class="second"></div></li>
                
                </li>
            </ul>
            
            </div>



        </div>
        <!-- menu结束 -->
      </div>
    </div>
    <!-- bottom结束 -->

  </div>
  <!-- header结束 -->
  <!-- content -->
  
  <div class="content">
    <!-- 轮播 -->
    <div class="lunbo">
      <img src="https://yanxuan.nosdn.127.net/228e70f4622ff4956c09f5758dd7d46b.jpeg?type=webp&imageView&quality=95&thumbnail=1920x420">
    </div>


<!-- 热销榜 -->
<div class="hot_outer">
  <ul class="hot_goods">
    <li>- 热销榜 -</li>
    <li><img src="../img/全球热销榜.PNG" alt=""><span>全站<br>热销榜</span></li>
    <li><img src="../img/居家生活榜.PNG" alt=""><span>居家<br>生活榜</span></li>
    <li><img src="../img/服饰鞋包榜.PNG" alt=""><span>服饰<br>鞋包榜</span></li>
    <li><img src="../img/美食酒水榜.PNG" alt=""><span>美食<br>酒水榜</span></li>
    <li><img src="../img/数码家电榜.PNG" alt=""><span>数码<br>家电榜</span></li>
    <li><img src="../img/个护清洁榜.PNG" alt=""><span>个护<br>清洁榜</span></li>
    <li><img src="../img/运动旅行榜.PNG" alt=""><span>运动<br>旅行榜</span></li>
    <li><img src="../img/母婴亲子榜.PNG" alt=""><span>母婴<br>亲子榜</span></li>
    <li><img src="../img/全球特色榜.PNG" alt=""><span>全球<br>特色榜</span></li>
  </ul>
</div>
<!-- 热销榜结束 -->

<!-- 新品首发 -->
<div class="xpsf">
  <!-- 居中 -->
  <div class="wrapper">
    <h3 class="name">新品首发</h3>
    <div class="headerLeft">为你寻觅世间好物</div>
    <ul class="p_list">
      <li>
        <div class="photo">
          <div class="photo_list">
            <img src="https://yanxuan-item.nosdn.127.net/570c17ec4e8088fee50959f81173857c.png?type=webp&quality=95&thumbnail=265x265&imageView" alt="">
            <img src="https://yanxuan-item.nosdn.127.net/976660d7251d8a707a1b0152d30c3b14.jpg?type=webp&quality=95&thumbnail=265x265&imageView" alt="">
             
           
           
          </div>
          
        </div>
        <div class="text">
          <span>可以吃的“冻干酥脆咖啡” 咖啡饼干 340g</span>
          <div class="price">
            ￥13.9
          </div>
        </div>
        
      </li>
      <li>
        <div class="photo">
          <div class="photo_list">
            <img src="https://yanxuan-item.nosdn.127.net/5ad31954596a4c97de4272fdf93efebe.png?type=webp&quality=95&thumbnail=265x265&imageView" alt="">
            <img src="https://yanxuan-item.nosdn.127.net/6eb36ae99447d935543fd5d558169520.png?type=webp&quality=95&thumbnail=265x265&imageView" alt="">
            
          </div>
        </div>
        <div class="text">
          <span>蜂蜜般流心，大颗土耳其杏肉</span>
          <div class="price">
            ￥16.9
          </div>
        </div>
      </li>
      <li>
        <div class="photo">
          <div class="photo_list">
            <img src="https://yanxuan-item.nosdn.127.net/7c350185a9a0d330d6e5e60055a8e64c.png?type=webp&quality=95&thumbnail=265x265&imageView" alt="">
            <img src="https://yanxuan-item.nosdn.127.net/21c4c1e7a93407238b66927e4a5fb24a.png?type=webp&quality=95&thumbnail=265x265&imageView" alt="">
          </div>
        </div>
        <div class="text">
          <span>日本制造，隅田川意式手冲特浓挂耳咖啡</span>
          <div class="price">
            ￥39.9
          </div>
        </div>
      </li>
      <li>
        <div class="photo">
          <div class="photo_list">
            <img src="https://yanxuan-item.nosdn.127.net/9c5db0ed53c296ed3c636bfbafa45652.png?type=webp&quality=95&thumbnail=265x265&imageView" alt="">
            <img src="https://yanxuan-item.nosdn.127.net/1f268537a74bd3495f360379ff2c9de8.png?type=webp&quality=95&thumbnail=265x265&imageView" alt="">
          </div>
        </div>
          <div class="text">
            <span>窈窕身姿 芊芊如燕膏 120克（10克*12袋）</span>
            <div class="price">
              ￥105
            </div>
        </div>
      </li>
    </ul>
  </div>
</div>





    <!-- 人气推荐 -->
    <div class="rqtj">
      <div class="wapper">
        <div class="popularity">
          <div class="title">
            <h3 class="name">人气推荐</h3>
            <div class="headerLeft checked">编辑推荐</div>
            <div class="headerLeft">热销总榜</div>
            <div class="headerRight">更多推荐></div>
          </div>
          <div class="product">
            <div id="productItemFirst" class="productItem">
              <img src="https://yanxuan.nosdn.127.net/static-union/1628213373854ca1.png" alt="图片丢失">
              <img
                src="https://yanxuan-item.nosdn.127.net/bebff6d69027991f02077dc1f249059f.png?type=webp&quality=95&thumbnail=320x320&imageView"
                alt="图片丢失">
              <div class="title
          ">
                <h4 class="name">
                  口袋里的咖啡馆 浓缩胶囊咖啡 焦糖拿铁1袋
                </h4>
                <p class="price">¥21.8</p>
              </div>
            </div>
            <div class="productItem">
              <img src="https://yanxuan.nosdn.127.net/static-union/1628213373854ca1.png" alt="图片丢失">
              <img
                src="https://yanxuan-item.nosdn.127.net/0736325df88942d67a31b5bd5bb2a502.png?type=webp&quality=95&thumbnail=180y180&imageView"
                alt="图片丢失">
              <div class="title
          ">
                <div class="prdtTags"><span>3件8.5折</span></div>

                <h4 class="name">
                  无添加蔗糖，苏打饼干 360克
                </h4>
                <p class="price">¥12.8
                  <span>
                    ¥88
                  </span>

                </p>
              </div>
            </div>
            <div class="productItem"><img src="https://yanxuan.nosdn.127.net/static-union/1628213373854ca1.png" alt="图片丢失">
        <img
          src="https://yanxuan-item.nosdn.127.net/55f4fcc2773ac277d0c84138e9b7489b.png?type=webp&quality=95&thumbnail=180y180&imageView"
          alt="图片丢失">
        <div class="title
        ">
          <div class="prdtTags"><span>99选9</span></div>

          <h4 class="name">
            无添加蔗糖，澳洲进口 即食燕麦片 1千克
          </h4>
          <p class="price">¥19
            <span>
              ¥28
            </span>
        </p>
        </div>
</div>
            <div class="productItem"><img src="https://yanxuan.nosdn.127.net/static-union/1628213373854ca1.png" alt="图片丢失">
        <img
          src="https://yanxuan-item.nosdn.127.net/6b9d93eae44995e560bcaf9154becee4.png?type=webp&quality=95&thumbnail=180y180&imageView"
          alt="图片丢失">
        <div class="title
        ">
          <div class="prdtTags"><span>99选9</span></div>

          <h4 class="name">
            惊喜藏在蛋黄里，翻砂卤蛋 245克
          </h4>
          <p class="price">¥18
            <span>
              ¥19.9
            </span>

          </p>
        </div></div>
            <div class="productItem"><img src="https://yanxuan.nosdn.127.net/static-union/1628213373854ca1.png" alt="图片丢失">
        <img
          src="https://yanxuan-item.nosdn.127.net/2c0147161faaa160cf10b6770f1e290d.png?type=webp&quality=95&thumbnail=180y180&imageView"
          alt="图片丢失">
        <div class="title
        ">
          <div class="prdtTags"><span>每日抄低</span></div>

          <h4 class="name">
            清新英国梨香，强力去污 酵素洗衣液 3千克
          </h4>
          <p class="price">¥21.9
            <span>
              ¥35
            </span>

          </p>
        </div></div>
            <div class="productItem"><img src="https://yanxuan.nosdn.127.net/static-union/1628213373854ca1.png" alt="图片丢失">
        <img
          src="https://yanxuan-item.nosdn.127.net/0dee0387a9cd03759b243bd4f887d223.png?type=webp&quality=95&thumbnail=180y180&imageView"
          alt="图片丢失">
        <div class="title
        ">
          <div class="prdtTags"><span>59选2</span></div>

          <h4 class="name">
            新疆长绒棉 男士圆领T恤 
          </h4>
          <p class="price">¥69
            <span>
              ¥88
            </span>
          </p>
        </div></div>
            <div class="productItem"><img src="https://yanxuan.nosdn.127.net/static-union/1628213373854ca1.png" alt="图片丢失">
        <img
          src="https://yanxuan-item.nosdn.127.net/e3fdeaf58254e6016666f560347dbe56.png?type=webp&quality=95&thumbnail=320x320&imageView"
          alt="图片丢失">
        <div class="title
        ">
          <div class="prdtTags"><span>99选9</span></div>

          <h4 class="name">
            红杏干 180克
          </h4><br>
          <p class="price">¥20
            <span>
              ¥29.9
            </span>
          </p>
        </div></div>
          </div>
        </div>
      </div>
    </div>
    <!-- 人气推荐结束 -->

    <!-- 居家生活 -->
<div class="jjsh">
  <div class="wrapper">
    居家生活
  </div>
</div>

  </div>
  <!-- content结束 -->
  <!-- footer -->
  <div class="footer">

  </div>
  <!-- footer结束 -->